<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script crossorigin="anonymous" integrity="sha512-UN8wX5Zf4Af6/2UJOYTYyWLHdua4SWMd1pnIxNoDCtqdaAMk1TQdvwwgoG7ShvuOS1d9jCerLNzwfvRmL7N4iA==" src="https://lib.baomitu.com/echarts/5.2.0/echarts.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>


  <title>红旗景点</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
      width: 100%;
    }

    .box {
      height: 100%;
      width: 100%;
    }

    div {
      float: left;
    }
  </style>
</head>

<body>
<!-- 1.准备一个具备大小的 DOM 容器 -->
<div class="box"></div>


<script>
  // 2.初始化echarts实例化对象
  var myChart = echarts.init(document.querySelector('.box'));

  var getY = function(x) {
    let y = Math.sqrt((1 - Math.pow(x / 38, 2)) * Math.pow(30, 2));
    return y;
  };
  var getOutY = function(x) {
    let y = Math.sqrt((1 - Math.pow(x / 50, 2)) * Math.pow(42, 2));
    return y;
  };
  var items = [{

    symbol: "",
    name: "叉子沟",
    value: [5, getOutY(5)],
    pointType: "point",
    belong: "踏遍青山"
  }, {

    symbol: "",
    name: "太行山",
    value: [7.5, getOutY(7.5)],
    pointType: "point",
    belong: "踏遍青山"
  }, {

    symbol: "",
    name: "浊漳河",
    value: [10, getOutY(10)],
    pointType: "point",
    belong: "河渠区"
  }, {

    symbol: "",
    name: "望漳亭",
    value: [12.5, getOutY(12.5)],
    pointType: "point",
    belong: "河渠区"
  }, {

    symbol: "",
    name: "红旗渠田园",
    value: [15, getOutY(15)],
    pointType: "point",
    belong: "农庄田园区"
  }, {

    symbol: "",
    name: "红旗渠农庄",
    value: [17.5, getOutY(17.5)],
    pointType: "point",
    belong: "农庄田园区"
  }, {

    symbol: "",
    name: "红旗渠管理中心",
    value: [20, getOutY(20)],
    pointType: "point",
    belong: "管理区"
  }, {

    symbol: "",
    name: "分水岭管理所",
    value: [22.5, getOutY(22.5)],
    pointType: "point",
    belong: "管理区"
  }, {

    symbol: "",
    name: "游客中心",
    value: [25, getOutY(25)],
    pointType: "point",
    belong: "游客区"
  }, {

    symbol: "",
    name: "团结洞",
    value: [27.5, getOutY(27.5)],
    pointType: "point",
    belong: "红旗渠风景区"
  }, {

    symbol: "",
    name: "鹰嘴山",
    value: [30, getOutY(30)],
    pointType: "point",
    belong: "红旗渠风景区"
  }, {

    symbol: "",
    name: "杏花坡",
    value: [32.5, getOutY(32.5)],
    pointType: "point",
    belong: "红旗渠风景区"
  }, {

    symbol: "",
    name: "迷路口",
    value: [35, getOutY(35)],
    pointType: "point",
    belong: "红旗渠风景区"
  }, {

    symbol: "",
    name: "青年洞",
    value: [37.5, getOutY(37.5)],
    pointType: "point",
    belong: "红旗渠风景区"
  }, {

    symbol: "",
    name: "望潭亭",
    value: [40, getOutY(40)],
    pointType: "point",
    belong: "红旗渠风景区",
    label: {
      show: true,
      offset: [10, 5]
    }
  }, {

    symbol: "",
    name: "大般若寺",
    value: [42.5, getOutY(42.5)],
    pointType: "point",
    belong: "红旗渠风景区",
    label: {
      show: true,
      offset: [12, 8]
    }
  }, {

    symbol: "",
    name: "南天柱",
    value: [45, getOutY(45)],
    pointType: "point",
    belong: "红旗渠风景区",
    label: {
      show: true,
      offset: [15, 10]
    }
  }, {

    symbol: "",
    name: "鱼鳞大石塘",
    value: [47.2, getOutY(47.2)],
    pointType: "point",
    belong: "红旗渠风景区",
    label: {
      show: true,
      offset: [15, 15]
    }
  }, {

    symbol: "",
    name: "孙叔敖开芍陂",
    value: [49, getOutY(49)],
    pointType: "point",
    belong: "红旗渠风景区",
    label: {
      show: true,
      offset: [15, 15]
    }
  }, {

    symbol: "",
    name: "分水闸",
    value: [49.95, getOutY(49.95)],
    pointType: "point",
    belong: "红旗渠风景区",
    label: {
      show: true,
      offset: [15, 20]
    }
  }, {

    symbol: "",
    name: "琉璃光寺",
    value: [49.6, -getOutY(49.6)],
    pointType: "point",
    belong: "红旗渠风景区",
    label: {
      show: true,
      offset: [15, -15]
    }
  }, {

    symbol: "",
    name: "木球泉",
    value: [48.2, -getOutY(48.2)],
    pointType: "point",
    belong: "红旗渠风景区",
    label: {
      show: true,
      offset: [12, -10]
    }
  }, {

    symbol: "",
    name: "羊坡圈",
    value: [46.3, -getOutY(46.3)],
    pointType: "point",
    belong: "红旗渠风景区",
    label: {
      show: true,
      offset: [12, -8]
    }
  }, {

    symbol: "",
    name: "北坡山",
    value: [44, -getOutY(44)],
    pointType: "point",
    belong: "红旗渠风景区",
    label: {
      show: true,
      offset: [10, -5]
    }
  }, {

    symbol: "",
    name: "桥抵区政府",
    value: [38, -getOutY(38)],
    pointType: "point",
    belong: "桥抵区",
    label: {
      show: true,
      offset: [10, -5]
    }
  }, {

    symbol: "",
    name: "河东区政府",
    value: [23, -getOutY(23)],
    pointType: "point",
    belong: "河东区"
  }, {

    symbol: "",
    name: "市人防办",
    value: [20, -getOutY(20)],
    pointType: "point",
    belong: "河东区"
  }, {

    symbol: "",
    name: "市粮食和物资储备局",
    value: [17, -getOutY(17)],
    pointType: "point",
    belong: "河东区"
  }, {

    symbol: "",
    name: "市场监管委",
    value: [14, -getOutY(14)],
    pointType: "point",
    belong: "河东区"
  }, {

    symbol: "",
    name: "纪念区政府",
    value: [11, -getOutY(11)],
    pointType: "point",
    belong: "纪念区"
  }, {

    symbol: "",
    name: "红旗渠纪念馆",
    value: [8, -getOutY(8)],
    pointType: "point",
    belong: "纪念区"
  }, {

    symbol: "",
    name: "李先念台阶",
    value: [5, -getOutY(5)],
    pointType: "point",
    belong: "纪念区"
  }, {

    symbol: "",
    name: "红旗渠纪念中心",
    value: [2, -getOutY(2)],
    pointType: "point",
    belong: "纪念区"
  }, {

    symbol: "",
    name: "游客纪念中心",
    value: [-1, -getOutY(-1)],
    pointType: "point",
    belong: "纪念区"
  }, {

    symbol: "",
    name: "西门豹治邺",
    value: [-4, -getOutY(-4)],
    pointType: "point",
    belong: "纪念区"
  }, {

    symbol: "",
    name: "静海区政府",
    value: [-7, -getOutY(-7)],
    pointType: "point",
    belong: "静海区"
  }, {

    symbol: "",
    name: "北辰区政府",
    value: [-10, -getOutY(-10)],
    pointType: "point",
    belong: "北辰区"
  }, {

    symbol: "",
    name: "红桥区政府",
    value: [-13, -getOutY(-13)],
    pointType: "point",
    belong: "红桥区"
  }, {

    symbol: "",
    name: "滨海新区政府",
    value: [-16, -getOutY(-16)],
    pointType: "point",
    belong: "滨海新区"
  }, {

    symbol: "",
    name: "宁河区政府",
    value: [-19, -getOutY(-19)],
    pointType: "point",
    belong: "宁河区"
  }, {

    symbol: "",
    name: "神龟洞",
    value: [-22, -getOutY(-22)],
    pointType: "point",
    belong: "体验基地"
  }, {

    symbol: "",
    name: "观景台",
    value: [-25, -getOutY(-25)],
    pointType: "point",
    belong: "体验基地"
  }, {

    symbol: "",
    name: "红色廊桥",
    value: [-28, -getOutY(-28)],
    pointType: "point",
    belong: "体验基地"
  }, {

    symbol: "",
    name: "十水言碑",
    value: [-31, -getOutY(-31)],
    pointType: "point",
    belong: "体验基地"
  }, {

    symbol: "",
    name: "虎口崖",
    value: [-34, -getOutY(-34)],
    pointType: "point",
    belong: "体验基地",
  }, {

    symbol: "",
    name: "神工铺",
    value: [-36, -getOutY(-36)],
    pointType: "point",
    belong: "体验基地",
    label: {
      show: true,
      offset: [-10, -5]
    }
  }, {

    symbol: "",
    name: "咏诗台",
    value: [-39, -getOutY(-39)],
    pointType: "point",
    belong: "体验基地",
    label: {
      show: true,
      offset: [-10, -8]
    }
  }, {

    symbol: "",
    name: "一线天",
    value: [-42, -getOutY(-42)],
    pointType: "point",
    belong: "体验基地",
    label: {
      show: true,
      offset: [-10, -8]
    }
  }, {

    symbol: "",
    name: "双锁关",
    value: [-45, -getOutY(-45)],
    pointType: "point",
    belong: "体验基地",
    label: {
      show: true,
      offset: [-12, -10]
    }
  }, {

    symbol: "",
    name: "修行洞",
    value: [-47.5, -getOutY(-47.5)],
    pointType: "point",
    belong: "体验基地",
    label: {
      show: true,
      offset: [-12, -12]
    }
  }, {

    symbol: "",
    name: "凤凰台",
    value: [-49.3, -getOutY(-49.3)],
    pointType: "point",
    belong: "体验基地",
    label: {
      show: true,
      offset: [-15, -15]
    }
  }, {

    symbol: "",
    name: "子孙阁",
    value: [-49.99, getOutY(-49.99)],
    pointType: "point",
    belong: "体验基地",
    label: {
      show: true,
      offset: [-15, -18]
    }
  }, {

    symbol: "",
    name: "观演台",
    value: [-49, getOutY(-49)],
    pointType: "point",
    belong: "观演区",
    label: {
      show: true,
      offset: [-15, 20]
    }
  }, {

    symbol: "",
    name: "观演区服务办",
    value: [-47.2, getOutY(-47.2)],
    pointType: "point",
    belong: "观演区",
    label: {
      show: true,
      offset: [-15, 15]
    }
  }, {

    symbol: "",
    name: "观光游客中心",
    value: [-45, getOutY(-45)],
    pointType: "point",
    belong: "观演区",
    label: {
      show: true,
      offset: [-15, 15]
    }
  }, {

    symbol: "",
    name: "登山步道",
    value: [-42.5, getOutY(-42.5)],
    pointType: "point",
    belong: "观演区",
    label: {
      show: true,
      offset: [-15, 10]
    }
  }, {

    symbol: "",
    name: "鹊桥",
    value: [-40, getOutY(-40)],
    pointType: "point",
    belong: "观演区",
    label: {
      show: true,
      offset: [-12, 8]
    }
  }, {

    symbol: "",
    name: "论艺红旗渠",
    value: [-37.5, getOutY(-37.5)],
    pointType: "point",
    belong: "观演区",
    label: {
      show: true,
      offset: [-10, 5]
    }
  }, {

    symbol: "",
    name: "观光车售票中心",
    value: [-35, getOutY(-35)],
    pointType: "point",
    belong: "观演区"
  }, {

    symbol: "",
    name: "游船码头",
    value: [-32.5, getOutY(-32.5)],
    pointType: "point",
    belong: "观演区"
  }, {

    symbol: "",
    name: "观演区办公厅",
    value: [-30, getOutY(-30)],
    pointType: "point",
    belong: "观演区"
  }, {

    symbol: "",
    name: "回山角",
    value: [-27.5, getOutY(-27.5)],
    pointType: "point",
    belong: "观演区"
  }, {

    symbol: "",
    name: "市委办公厅",
    value: [-25, getOutY(-25)],
    pointType: "point",
    belong: "观演区"
  }, {

    symbol: "",
    name: "红旗渠庄园",
    value: [-22.5, getOutY(-22.5)],
    pointType: "point",
    belong: "庄园"
  }, {

    symbol: "",
    name: "津南区政府",
    value: [-17.5, getOutY(-17.5)],
    pointType: "point",
    belong: "津南区"
  }, {

    symbol: "",
    name: "庄园办公厅",
    value: [-15, getOutY(-15)],
    pointType: "point",
    belong: "津南区"
  }, {

    symbol: "",
    name: "红旗渠中心",
    value: [-12.5, getOutY(-12.5)],
    pointType: "point",
    belong: "飞跃红旗渠"
  }, {

    symbol: "",
    name: "红旗渠廊桥",
    value: [-10, getOutY(-10)],
    pointType: "point",
    belong: "飞跃红旗渠"
  }, {

    symbol: "",
    name: "络丝潭观景台",
    value: [-7.5, getOutY(-7.5)],
    pointType: "point",
    belong: "络丝潭"
  }, {

    symbol: "",
    name: "跃峰渠",
    value: [-5, getOutY(-5)],
    pointType: "point",
    belong: "络丝潭"
  }, {

    symbol: "",
    name: "踏遍青山",
    value: [6, getY(6)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "河渠区",
    value: [12, getY(12)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "农庄田园区",
    value: [18, getY(18)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "管理区",
    value: [24, getY(24)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "游客区",
    value: [30, getY(30)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "红旗渠风景区",
    value: [36, getY(36)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "桥抵区",
    value: [30, -getY(30)],
    pointType: "cloud"
  }, {
    level: 4,
    symbol: "",
    name: "河东区",
    value: [11, -getY(11)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "纪念区",
    value: [4, -getY(4)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "静海区",
    value: [-4, -getY(-4)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "北辰区",
    value: [-11, -getY(-11)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "红桥区",
    value: [-18, -getY(-18)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "滨海新区",
    value: [-24, -getY(-24)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "宁河区",
    value: [-30, -getY(-30)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "体验基地",
    value: [-36, -getY(-36)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "观演区",
    value: [-36, getY(-36)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "庄园",
    value: [-30, getY(-30)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "津南区",
    value: [-18, getY(-18)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "飞跃红旗渠",
    value: [-12, getY(-12)],
    pointType: "cloud"
  }, {

    symbol: "",
    name: "络丝潭",
    value: [-6, getY(-6)],
    pointType: "cloud"
  }];

  items.forEach((el, index) => {
    if (el.pointType == "cloud") {
      el.symbol = "image://",
              el.symbolSize = [56, 35];
      el.label = {
        normal: {
          show: true,
          position: "bottom",
          borderWidth: 1,
          borderRadius: 12,
          padding: [4, 8, 4, 8],
          distance: 10,
          color: "rgb(255,255,255)",
          borderColor: "rgb(89,197,238)"
        }
      };
    } else if (el.pointType == "point") {
      el.itemStyle = {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: "#0ceffd"
        }, {
          offset: 1,
          color: "#0fffff"
        }])
      };
      if (!el.label) {
        el.label = {
          show: true
        }
      }
      el.label.width = 200
      el.label.color = {
        lineColor: {
          color: "rgb(24,163,239)"
        }
      }
      if (index < 38) {
        el.label.rotate = 57 - 3 * index
        el.label.align = "left"
        if (!el.label.offset) {
          el.label.offset = [8, 0]
        }
        if (index < 20) {
          el.label.position = 'top'
        } else {
          el.label.position = 'bottom'
        }
      } else {
        el.label.rotate = (-57 + 3 * (75 - index))
        el.label.align = "right"
        if (!el.label.offset) {
          el.label.offset = [-8, 0]
        }
        if (index > 56) {
          el.label.position = 'top'
        } else {
          el.label.position = 'bottom'
        }
      }

    }
  });
  const dataArr = []
  const targetCoord = [0, 0];
  items.forEach(el => {
    if (el.belong) {
      items.forEach(element => {
        if (el.belong == element.name) {
          dataArr.push([{
            coord: element.value
          }, {
            coord: el.value
          }]);
        }
      });
    } else if (el.pointType != 'none') {
      dataArr.push([{
        coord: targetCoord
      }, {
        coord: el.value
      }]);
    }
  });
  var option = {
    backgroundColor: '#111',
    legend: [],
    xAxis: {
      show: false,
      type: "value",
      max: 50,
      min: -51
    },
    yAxis: {
      show: false,
      type: "value",
      max: 50,
      min: -50
    },
    series: [{
      type: "graph",
      layout: "none",
      coordinateSystem: "cartesian2d",
      symbolSize: [15, 15],
      z: 3,
      circular: {
        rotateLabel: true
      },

      itemStyle: {
        normal: {
          shadowColor: "none"
        }
      },
      data: items
    }, {
      name: "",
      type: "lines",
      coordinateSystem: "cartesian2d",
      z: 1,
      effect: {
        show: true,
        smooth: false,
        trailLength: 0,
        symbol: "image://",
        symbolSize: [10, 30],
        period: 4,
        delay: 2
      },

      lineStyle: {
        width: 2,
        color: 'rgb(255,255,255)',
        curveness: 0
      },
      data: dataArr
    }]
  };
  myChart.setOption(option);
</script>
</body>

</html>